<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .display {
        height: 400px;
      }
      ul {
        display: block;
        width: 80%;
      }
      ul > li {
        display: block;
        width: 20%;
        float: left;
      }

      ul > li > img {
        width: 80%;
        border-radius: 2px;
      }
      .current {
        border: 2px solid orangered;
      }
    </style>
  </head>
  <body>
    <h1>相册</h1>
    <!-- 大图展示区 -->
    <img class="display" src="./img/app.png" />
    <!-- 小图列表展示区 -->
    <ul>
      <li><img class="current" src="./img/app.png" /></li>
      <li><img src="./img/b.png" /></li>
      <li><img src="./img/a.webp" /></li>
      <li><img src="./img/filetype.png" /></li>
    </ul>
    <button>点击换一批照片</button>
    <script>
      //立即调用函数，为了防止变量污染
      (function () {
        //使用到的内容
        let aResList = new Array(4);
        let iCount; //计数器
        let oDisplay = document.querySelector(".display");
        let oUl = document.querySelector("ul");

        //加载外部资源
        function loadRes() {
          iCount = 0;//计时器归零
          let iCountHandler = setInterval(function () {
            let oXhr = new XMLHttpRequest();
            oXhr.open(
              "GET",
              "https://api.thecatapi.com/v1/images/search?size=full"
            );
            oXhr.onreadystatechange = function () {
              if (oXhr.readyState === 4 && oXhr.status === 200) {
                let oRes = JSON.parse(oXhr.response);
                aResList[iCount++] = oRes; //计数器累加并将结果放入列表中
                console.log(oRes);
              }
            };
            oXhr.send();
            if (iCount >= 3) {
              //请求次数，这里为了大家能看懂，没有使用变量替代
              clearInterval(iCountHandler);
              setTimeout(updatePage, 800); //更新渲染页面,延后800毫秒
            }
          }, 1000); //每秒请求一次 ，防止被封号
        }

        //渲染页面
        function updatePage() {
          oDisplay.setAttribute("src", aResList[1][0].url);
          while (oUl.hasChildNodes()) {
            oUl.removeChild(oUl.firstChild); //先清空所有子节点
          }
          for (let i = 0; i < aResList.length; i++) {
            let oImg = document.createElement("img");
            oImg.setAttribute("src", aResList[i][0].url);
            oImg.setAttribute("class", i == 1 ? "current" : " ");
            let oLi = document.createElement("li");
            oLi.appendChild(oImg);
            oUl.appendChild(oLi);
          }
        }

        //点击更换图片，此处的目的是演示事件委托的使用
        oUl.onclick = function (eve) {
          let oImgs = oUl.querySelectorAll("img");
          for (let i = 0; i < oImgs.length; i++) {
            oImgs[i].removeAttribute("class"); //取消当前选中状态
          }

          // console.log(eve.target);
          let sImgSrc = "";
          if (eve.target.tagName.toLowerCase() === "img") {
            sImgSrc = eve.target.getAttribute("src");
            eve.target.setAttribute("class", "current");
          } else {
            //点中了li
            sImgSrc = eve.target.firstElementChild.getAttribute("src");
            eve.target.firstElementChild.setAttribute("class", "current");
          }
          oDisplay.setAttribute("src", sImgSrc); //更换大图区
        };

        //页面加载5秒后加载网络资源
        window.onload = function () {
          setTimeout(() => {
            loadRes();
          }, 5000);
        };

        //点击按钮加载网络资源
        document.querySelector("button").onclick = loadRes;
      })();//使用立即调用函数避免全局变量污染
    </script>
  </body>
</html>
